<template>
  <div>
    <h2 style="text-align: center">库存</h2>
    <el-row>
      <el-col :span="7">
        商品名：
        <el-input size="large" style="width: 200px;" v-model="queryObj.goodsName" placeholder="输入商品名"/>
      </el-col>
      <el-col :span="7">
        商品类型：
        <el-select v-model="queryObj.type" clearable class="m-2" placeholder="选择类型" size="large">
          <el-option
              v-for="item in types"
              :key="item"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="7">
        商品品牌：
        <el-select v-model="queryObj.brand" clearable class="m-2" placeholder="选择品牌" size="large">
          <el-option
              v-for="item in brands"
              :key="item"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="findStore(1)">搜索</el-button>
      </el-col>
    </el-row>


    <el-table :data="storeList" style="width: 100%" row-key="id" height="300">
      <el-table-column type="expand">
        <template #default="props">
          <span style="margin-left: 30px;font-weight: bold">商品详情</span>
          <el-table :data="props.row.goodsInfoList" stripe style="margin-left: 20px;">
            <el-table-column label="颜色" prop="color"/>
            <el-table-column label="大小" prop="size"/>
            <el-table-column label="进货价" prop="price"/>

            <el-table-column label="数量">
              <template #default="scope">
                <el-input-number v-model="scope.row.num" @change="updateNum(scope.row.id,scope.row.num)"
                                 :min="0"></el-input-number>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" type="danger" @click="del(scope.row.id)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="商品编号" prop="goodsId"/>
      <el-table-column label="商品名称" prop="goodsName"/>
      <el-table-column label="商品品牌" prop="brand"/>
      <el-table-column label="商品类型" prop="type"/>
      <el-table-column label="商品总数" prop="num"/>

      <!--      <el-table-column label="操作">-->
      <!--        <template #default="scope">-->
      <!--          <el-button size="small" type="danger" @click="handleEdit(scope.$index, scope.row)">-->
      <!--            删除-->
      <!--          </el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->

    </el-table>


    <div style="display: flex;justify-content:space-around;margin-top: 40px">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="findStore"
      />

      <el-button type="primary" @click="showAdd=true">添加商品</el-button>
    </div>
    <el-dialog v-model="showAdd" title="添加商品" @close="resetForm('addGoodsForm')">
      <el-form
          :model="addObj"
          label-position="left"
          ref="addGoodsForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="default"
          style="width: 500px"
          status-icon
      >
        <el-form-item label="商品编号" prop="goodsId">
          <el-input @blur="findGoodsById" v-model="addObj.goodsId"/>
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input :disabled="addObj.status" v-model="addObj.goodsName"/>
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-input :disabled="addObj.status" v-model="addObj.brand"/>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-input :disabled="addObj.status" v-model="addObj.type"/>
        </el-form-item>

        <el-form-item label="颜色" prop="color">
          <el-input v-model="addObj.color"/>
        </el-form-item>
        <el-form-item label="大小" prop="size">
          <el-input v-model="addObj.size"/>
        </el-form-item>
        <el-form-item label="数量" prop="num">
          <el-input-number :min="0" v-model="addObj.num"/>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number :min="0" :precision="2" :step="0.1" v-model="addObj.price"/>
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="addGoods('addGoodsForm')">
          添加
        </el-button>
        <el-button type="primary" @click="resetForm('addGoodsForm')">
          清空
        </el-button>
      </span>
      </template>
    </el-dialog>


  </div>
</template>

<script>
import axios from 'axios'
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      storeList: [],
      total: 0,
      currentPage: 1,
      pageSize: 6,
      queryObj: {goodsName: '', type: '', brand: ''},
      types: [],
      brands: [],
      showAdd: false,
      addObj: {},
      rules: {
        goodsId: [
          {
            required: true,
            message: '必须填写商品编号', trigger: 'blur'
          },
        ],
        goodsName: [
          {
            required: true,
            message: '必须填写商品名称', trigger: 'blur'
          },
        ],
        brand: [
          {
            required: true,
            message: '必须填写品牌', trigger: 'blur'
          },
        ],
        type: [
          {
            required: true,
            message: '必须填写类型', trigger: 'blur'
          },
        ],
        color: [
          {
            required: true,
            message: '必须填写颜色', trigger: 'blur'
          },
        ],
        size: [
          {
            required: true,
            message: '必须填写大小', trigger: 'blur'
          },
        ],
        num: [
          {
            required: true,
            message: '必须填写数量', trigger: 'blur'
          },
        ],
        price: [
          {
            required: true,
            message: '必须填写进货价', trigger: 'blur'
          },
        ]
      }
    }
  },
  methods: {
    findStore(pageNO) {
      this.currentPage = pageNO
      this.queryObj.pageNO = pageNO;
      axios.get("/project/store/cutByItem", {params: this.queryObj}).then(resp => {
        let cutObj = resp.data.data
        this.storeList = cutObj.records
        this.total = cutObj.total
        this.pageSize = cutObj.size
      })
    },
    getTypes() {
      axios.get("/project/store/findAllType").then(resp => {
        this.types = resp.data.data
      })
    },
    getBrands() {
      axios.get("/project/store/findAllBrand").then(resp => {
        this.brands = resp.data.data
      })
    },


    updateNum(goodsInfoId, num) {
      axios.get("/project/store/updateNum", {params: {goodsInfoId, num}}).then(resp => {
        if (resp.data.success) {
          this.findStore(this.currentPage);
        }
      })
    },
    del(goodsInfoId) {
      axios.get("/project/store/deleteGoods", {params: {goodsInfoId}}).then(resp => {

        if (resp.data.success) {
          this.findStore(this.currentPage);
        }
      })
    },
    findGoodsById() {
      axios.get("/project/store/findById",
          {params: {goodsId: this.addObj.goodsId}}).then(resp => {
            if (resp.data.success) {
              if (resp.data.data != null) {
                this.addObj = resp.data.data
                console.log("heiheihei")
                console.log(this.addObj)
              }
            }
          }
          )
          },
          resetForm(formName)
      {
        this.$refs[formName].resetFields();
      }
    ,
      addGoods(formName)
      {
        this.$refs[formName].validate((valid) => {  //开启校验
          if (valid) {   // 如果校验通过，请求接口，允许提交表单
            axios.get("/project/store/add", {
              params: this.addObj
            }).then(resp => {
              if (resp.data.success === true) {
                this.showAdd = false;
                this.findStore(this.currentPage)
              } else {
                ElMessage.error(resp.data.errorMsg)
              }
            })

          }
          /*else {   //校验不通过
            alert('不能提交');
          }*/
        });
      }


    }, created() {
      this.getTypes()
      this.getBrands()
      this.findStore(1)
    }
  }
</script>

<style scoped>
.el-col {
  display: flex;
  align-items: center;
}

.el-row {
  margin: 40px 0;
}

</style>